import React, { useEffect, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { popItemList } from '../../service/DonationService'
import "../../css/Donation.scss"
import { NavBar, SearchBar, Image } from 'antd-mobile'


export default function ClassifyPage() {

  const navigateItem = useNavigate();

  const Url = "http://124.93.196.45:10001/";
  const [classifyList, setclassifyList] = useState([])
  const state = useLocation().state.id;
  const search = async () => {//请求数据
    let res = await popItemList(state)
    setclassifyList(res.data.rows)
    console.log(res, state);
  }

  const back = () => {
    window.history.back()
  }

  useEffect(() => {//页面加载时
    search()
    // search()
  }, [])
  return (
    <div className='Donation'>
      <div className='Donation-top'>
        <NavBar back='公益项目' onBack={back}></NavBar>
      </div>
      <div className='Donation-search'>
        <SearchBar placeholder='搜索公益项目' />
      </div>
      <ul className='recommend-List'>
        {classifyList.map((item: any) => {
          return (
            <li key={item.id} onClick={() => {
              navigateItem('/donationItem', { state: { itemId: item.id } })
            }}>

              <div className='box'>
                <Image src={Url + item.imgUrl}
                  width={180}
                  height={130}
                  fit='cover'
                  style={{ borderRadius: 15 }}
                />

                <div className='box-text'>
                  <p className='recommend-title'>{item.author}</p>
                  <p className='recommend-text'>{item.name}</p>
                </div>
              </div>
              <p className='recommend-time'>{item.createTime}</p>
            </li>
          )
        })}
      </ul>
    </div >
  )
}
